<template>
  <div class="good-mater">
    <div class="good-search">
      <van-search v-model="value" placeholder="请输入" placeholder-style="color:#999;" shape="round" use-action-slot @change="value = $event.detail">
        <view slot="action" @tap="onClick">
          搜索
        </view>
      </van-search>
    </div>
    <ze-scroll class="good-scroll" :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
      <div class="good-data">
        <div v-for="(item, idx) in goodList" :key="idx" class="good-single" @click="viewDetail(item)">
          <div class="good-name">
            {{ item.itemName }}
          </div>
          <div class="good-number">
            <div>{{ item.materialType }}</div>
            <div>总数量<span>{{ item.number }}</span>台</div>
          </div>
        </div>
      </div>
      <div class="good-addbtn">
        <div class="good-add" @click="clickAdd">
          新增
        </div>
      </div>
    </ze-scroll>
  </div>
</template>

<script>
import { getGoodsList } from '@/apis/office'
import ZeScroll from '@/components/ze-scroll/index.vue'
export default {
  components: { ZeScroll },
  props: {},
  data() {
    return {
      value: '',
      finished: false,
      goodList: [],
      status: 'more',
      pageNo: 1,
      loading: true,
    }
  },
  mounted() {
    this.loadGoods()
  },
  methods: {
    onClick() {
      this.loadGoods(this.value)
    },
    handleScrolltolower() {
      this.loadMore()
    },
    async loadGoods(itemName) {
      try {
        if (this.pageNo === 1) {
          this.loading = true
        } else {
          this.status = 'loading'
        }
        // await sleep(300)
        const res = await getGoodsList({
          pageNo: this.pageNo,
          itemName,
        })
        const { list, total } = res.data
        console.log(list, total)
        if (this.pageNo === 1) {
          this.goodList = list
        } else {
          this.goodList = [...this.goodList, ...list]
        }
        if (this.goodList.length >= total) {
          this.finished = true
          this.status = 'noMore'
        }
      } catch (e) {} finally {
        this.loading = false
      }
    },
    loadMore() {
      if (this.finished) {
        return
      }
      this.pageNo++
      this.loadGoods()
    },
    clickAdd() {
      uni.navigateTo({
        url: '/pages/office/goods-materials/good-add/index',
      })
    },
    viewDetail(item) {
      console.log(item, '999')
      uni.navigateTo({
        url: `/pages/office/goods-materials/good-list/index?param=${encodeURIComponent(JSON.stringify(item))}`,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.good-search{
  width:90%;
  position: fixed;
  left: 5%;
}
.good-scroll{
  position: absolute;
  top: 58px;
  width: 100%;
}
.good-data{
  width: 100%;
  padding-bottom: 30px;
  .good-single{
    margin:0 auto;
    width: 93%;
    height:72px;
    background-image: url('../../../static/office/box.png');
    background-size: 100% 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    .good-name{
      color:#000;
      font-size:16px;
      font-weight: 600;
      padding-left: 25px;
    }
    .good-number{
      margin-top: 5px;
      display: flex;
      padding-left: 25px;
      color:#666;
      font-size: 12px;
      div:first-child{
        padding-right: 10px;
        border-right: 1px solid #666;
      }
      div:nth-child(2){
        padding-left: 10px;
      }
      span{
        padding: 0px 10px;
      }
    }
  }
}
.good-addbtn{
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 10px;
  left: 12.5%;
  .good-add{
    width: 280px;
    height: 36px;
    background: linear-gradient(180deg, #739ECA 0%, #ABCDE7 100%);
    border-radius: 19px;
    color:#fff;
    font-size: 16px;
    text-align: center;
    line-height: 36px;
  }
}
</style>
<style lang="scss">
.good-mater{
  .van-cell__left-icon-wrap{
    padding-right:15px;
    border-right:2px solid #ccc;
    font-size: 18px !important;
    color: #999;
  }
  .van-cell__value{
    padding-left:10px;
  }
  .van-search__action{
    padding-left:15px;
    color:#739ECA;
  }
  .van-search{
    padding: 12px 0px 12px 0px !important;
  }
}
</style>
